import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';

import FootTabBar from 'COMPONENT/FootTabBar';
import HeaderBar from 'COMPONENT/HeaderBar';
import {Icon} from 'antd-mobile'
import {Link} from 'react-router'

export default class Home extends React.Component {
    static contextTypes = {
    router: PropTypes.object.isRequired
  }
  constructor(props) {
    super(props);

  }

  componentWillMount() {
    //获取token
  }
 search=()=>{
    this.context.router.push({
        pathname: '/Home/HouseList'
    })
  }

  render() {
    return (
      <div>
        <header className="header">
          <HeaderBar />
        </header>
        <div className='homeBox'>
          <img src="./imgs/banner2.png" alt="" />

          <img src="./imgs/search.png" className='search' onClick={this.search.bind(this)}/>
        </div>
        <div className='apartment'>
          <p>xx自持公寓</p>
          <span>城市独栋高品质青年社区</span>
        </div>
        <div className='selectCity'>
          <img src="./imgs/jxbj.png" alt=""/>
          <img src="./imgs/jxsh.png" alt=""/>
        </div>
        <div className='listBox bannerList'>
          <p>随遇而安 <span>查看更多></span></p>
          <span>推荐精选xx公寓</span>
          <ul>
            <li>
              <img src="./imgs/sy1.png" alt=""/>
              <h2>上海启灵xx公寓</h2>
              <span>欢乐城邦,启航之寓</span>
            </li>
            <li>
              <img src="./imgs/sy2.png" alt=""/>
              <h2>毕业租房攻略</h2>
              <span>1500以下好房推荐</span>
            </li>
            <li>
              <img src="./imgs/sy1.png" alt=""/>
              <h2>xx精选</h2>
              <span>百里挑一,业主原装</span>
            </li>
             <li>
              <img src="./imgs/sy2.png" alt=""/>
              <h2>毕业租房攻略</h2>
              <span>1500以下好房推荐</span>
            </li>
          </ul>
        </div>
        <div className='listBox bigbannerList'>
          <p>社区活动 <span>查看更多></span></p>
          <span>丰富多彩的社区活动</span>
          <ul>
            <li>
              <img src="./imgs/sq1.png" alt=""/>
              <h2>上海启灵xx公寓</h2>
              <span>欢乐城邦,启航之寓</span>
            </li>
            <li>
              <img src="./imgs/sq1.png" alt=""/>
              <h2>毕业租房攻略</h2>
              <span>1500以下好房推荐</span>
            </li>
            <li>
              <img src="./imgs/sq1.png" alt=""/>
              <h2>xx精选</h2>
              <span>百里挑一,业主原装</span>
            </li>
             <li>
              <img src="./imgs/sq1.png" alt=""/>
              <h2>毕业租房攻略</h2>
              <span>1500以下好房推荐</span>
            </li>
          </ul>
        </div>

        <div className='custrom'>
            <p>xx公寓客</p>
            <span>活出自己喜欢的样子</span>
            <ul>
                <li>
                    <img src="./imgs/k1.png" alt=""/>
                    <div>
                        <p>Met和他的黄小胖，有趣切笃定的创业之路</p>
                        <span>创业也吸猫，人工智能洪流的一股清泉</span>
                    </div>
                </li>
                <li>
                    <img src="./imgs/k2.png" alt=""/>
                    <div>
                        <p>Met和他的黄小胖，有趣切笃定的创业之路</p>
                        <span>创业也吸猫，人工智能洪流的一股清泉</span>
                    </div>
                </li>
                <li>
                    <img src="./imgs/k3.png" alt=""/>
                    <div>
                        <p>Met和他的黄小胖，有趣切笃定的创业之路</p>
                        <span>创业也吸猫，人工智能洪流的一股清泉</span>
                    </div>
                </li>
            </ul>
        </div>
        <FootTabBar selectedTab='redTab' />
      </div>
    );
  }
}